import { Image, Text, View } from "@tarojs/components"
import React from "react"
import Taro from "@tarojs/taro"
import "./index.scss"
import orderIcon from "../../../../assets/images/order-icon.png"
import { statusData } from "../../../../common/index"
import { getFormatDate } from "../../../../utils"

export default function OrderItem({ itemData, onClickButton }) {
  return (
    <View
      className="component-order-item"
      onClick={() => Taro.navigateTo({ url: "/pages/appointmentOrderDetail/index?id=" + itemData.ticketId })}
    >
      <View className="order-item-id">
        <Image src={orderIcon}></Image>
        <View>预约单号：{itemData.ticketId}</View>
      </View>
      <View className="order-item-main">
        <View className="order-item-header">
          <View className="order-item-status">{statusData[Number(itemData.status)].name}</View>
          <View className="order-item-price">预估费用：￥{itemData.price.toFixed(2)}</View>
        </View>
        <View className="order-item-info">
          <View className="order-item-info-detail">
            <View className="order-item-info-detail-name">{itemData.court}</View>
            <View className="order-item-info-detail-address">取拍时间：{getFormatDate(itemData.takeRacketTime)}</View>
            <View className="order-item-info-detail-remark">
              备注：{itemData.userRemark || <Text style={{ color: "#aaaaaa" }}>暂无备注</Text>}
            </View>
          </View>
          <View
            className="order-item-info-status"
            onClick={e => {
              e.stopPropagation()
              e.preventDefault()
              onClickButton()
            }}
          >
            {statusData[Number(itemData.status)].button}
          </View>
        </View>
      </View>
    </View>
  )
}
